﻿<style>
home-category .home-category-item {
    height: 57px;
    line-height: 57px;
    background-color: transparent;
    transition: all .5s;
    text-align: center;
}

 .active3{
  background-color: white;
} 
.home-category .home-category-link {
    display: block;
    color: #333;
     padding: 0 0px; 
    height: 100%;
    text-align: center;
}
.layout-header-logo {
    float: left;
    height: 80px;
     overflow:none; 
}
.home-category-item:hover a{
background-color: white;
}
.home-category .home-category-child {
    display: none;
    position: absolute;
    height: 468px;
    left: 244px;
    top: 0;
    background-color: #fff;
    white-space: nowrap;
    font-size: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}
</style>


<include file="header"/>
<div class="home">
    <!--  banner-->
    <div id="homeCarousel">
        <div class="swiper-container">
            <div class="swiper-wrapper" style="height: 480px;">
                <volist name="banner" id="ban">
                    <div class="swiper-slide"><img src="{$ban.img_url}" alt=""></div>
                </volist>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <!--	banner-->
    <ul class="home-category" id="homeCategory" style="margin-top: -10px;height: 490px;">
        <!--選項卡結束-->
        <li class="home-category-item"><strong><a href="{:U('Home/Shop/shopList')}" class="home-category-link">
            全部商品 </a></strong></li>
        <volist name="nav" id="na">
            <li class="home-category-item"><a href="{:U('Home/Shop/shopItemList',array('pid'=>$na['id']))}"
                                              class="home-category-link" style=" color: #333;
     padding: 0 0px;">{$na.class_name}</a>
                <div class="home-category-child clearfix" style="height: 490px;">
                    <div class="home-category-child-list clearfix">
                        <volist name="na.erji" id="erji">
                            <a class="home-category-child-item"
                               href="{:U('Home/Shop/shopList',array('id'=>$erji['id']))}">
                                <div class="home-category-child-text">{$erji.class_name}</div>
                            </a>
                        </volist>
                    </div>
                </div>
            </li>
        </volist>
        <!--選項卡結束-->
    </ul>
    <div class="home-hot mzcontainer">
        <div class="home-hot-header clearfix">
            <div class="home-hot-title">热品推荐</div>
        </div>
        <div class="home-hot-content lazyload" id="homeHotContent">
            <div class="swiper-containeredian">
                <div class="swiper-wrapper home-hot-list">
                    <volist name="hotTjPro" id="vo">
                        <li class="swiper-slide home-product">
                            <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}" >
                                <img class="home-product-img" src="{$vo['img_url']}">
                                <h4 class="home-product-title">{$vo['title']|cutStr=10,0,1}</h4>
                                <h6 class="home-product-subtitle red"><span class="home-product-subtitle-label" style="color: #000;background-color: transparent;">{$vo['miao']|cutStr=20,0,1}</span>
                                </h6>
                                <p class="home-product-bottom" style='margin-top: -21px;'><span class="home-product-price">{$vo['jiage']} <span
                                        class="home-product-start-tag">起</span> </span></p>
                            </a>
                        </li>
                    </volist>

                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
    <ul class="home-floor" id="homeFloor">
        <li class="home-floor-item mzcontainer">
            <div class="home-floor-ad">
                <div class="home-floor-ad-content">
                    <div class="mzcontainer"><a
                            href="{$advImgs[0][content]}" target="_blank" class="home-floor-ad-point"
                            data-mtype="store_index_yl_1_1"><img src="{$advImgs[0]['img_url']}" class="home-floor-ad-img"> </a></div>
                </div>
            </div>
            <div class="home-floor-content">
                <div class="home-floor-header clearfix">
                    <h2 class="home-floor-title">溫控器</h2>
                    <div class="home-floor-nav wkq_title">
                        <volist name="wkqData" id="wkqD">
                            <if condition="$i==1">
                                <a href="javascript:;" data-id="{$wkqD['bid']}" class="home-floor-nav-link active">{$wkqD['class_name']}</a>
                                <else/>
                                <a href="javascript:;" data-id="{$wkqD['bid']}" class="home-floor-nav-link">{$wkqD['class_name']}</a>
                            </if>
                        </volist>
                    </div>
                    <a class="home-floor-more" href="{:U('Home/Shop/shopList')}" target="_blank">更多&gt;</a></div>
                    <div class="home-floor-content-list">
                        <ul class="home-floor-product wkq-proData clearfix active">
                        <volist name="wkqData" id="wkqD"><!--为毛没有展示另一个item的东东-->
                            <if condition="$i==1">
                            <volist name="wkqD.items" id="vo">
                                <if condition="$i==1">
                                    <li class="home-product ad">
                                        <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}" >
                                            <img class="home-product-img" src="{$vo['img_url']}">
                                            <switch name="vo.sales">
                                                <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                            </switch>
                                        </a>
                                    </li>
                                    <else/>
                                    <li class="home-product" >
                                        <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}">
                                            <img class="home-product-img" src="{$vo['img_url']}">
                                            <h4 class="home-product-title">{$vo['title']|cutStr=10,0,1}</h4>
                                            <h6 class="home-product-subtitle red">{$vo['content']|cutStr=30,0,1}</h6>
                                            <p class="home-product-bottom" style="margin-top: -18px"> <span class="home-product-price">{$vo.jiage} </span> </p>
                                            <switch name="vo.sales">
                                                <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                            </switch>
                                        </a>
                                    </li>
                                </if>
                            </volist>
                        </ul>
                    </div>
                    </if>
                </volist>
            </div>
            <script>
$("a .more").mouseenter(function(){
    $(this).css("background-image","url()");
})
$(".more").mouseleave(function(){
    $(this).css("background-image","url(../images/more_iconBg.jpg)");
})
            </script>
        </li>
        <li class="home-floor-item mzcontainer">
            <div class="home-floor-ad">
                <div class="home-floor-ad-content">
                    <div class="mzcontainer"><a href="{$advImgs[1][content]}" target="_blank"><img src="{$advImgs[1]['img_url']}" class="home-floor-ad-img"/>
                        </a></div>
                </div>
            </div>
            <div class="home-floor-content">
                <div class="home-floor-header clearfix">
                    <h2 class="home-floor-title">温控配件</h2>
                    <div class="home-floor-nav wkpj_title">
                        <volist name="wkpjData" id="wkpjD">
                            <if condition="$i==1">
                                <a href="javascript:;" data-id="{$wkpjD['bid']}" class="home-floor-nav-link active">{$wkpjD['class_name']}</a>
                                <else/>
                                <a href="javascript:;" data-id="{$wkpjD['bid']}" class="home-floor-nav-link">{$wkpjD['class_name']}</a>
                            </if>
                        </volist>
                        </div>
                    <a class="home-floor-more" href="{:U('Home/Shop/shopList')}">更多&gt;</a></div>
                <div class="home-floor-content-list">
                    <!--		 第一个	-->
                    <ul class="home-floor-product clearfix active">
                    <volist name="wkpjData" id="wkpjD">
                        <if condition="$i==1">
                        <volist name="wkpjD.items" id="vo">
                            <if condition="$i==1">
                                <li class="home-product ad">
                                    <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}" >
                                        <img class="home-product-img" src="{$vo['img_url']}">
                                        <switch name="vo.sales">
                                            <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                        </switch>
                                    </a>
                                </li>
                                <else/>
                                <li class="home-product">
                                    <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}">
                                        <img class="home-product-img" src="{$vo['img_url']}">
                                        <h4 class="home-product-title">{$vo['title']|cutStr=10,0,1}</h4>
                                        <h6 class="home-product-subtitle red">{$vo['content']|cutStr=30,0,1}</h6>
                                        <p class="home-product-bottom" style='margin-top: -19px;'> <span class="home-product-price">{$vo.jiage} </span> </p>
                                        <switch name="vo.sales">
                                            <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                        </switch>
                                    </a>
                                </li>
                            </if>
                        </volist>
                    </ul>
                    </if>
                </volist>
                </div>
            </div>
        </li>
        <li class="home-floor-item mzcontainer">
            <div class="home-floor-ad">
                <div class="home-floor-ad-content">
                    <div class="mzcontainer"> <a
                            href="{$advImgs[2][content]}" class="home-floor-ad-point" target="_blank"><img src="{$advImgs[2][img_url]}" class="home-floor-ad-img"></a></div>
                </div>
            </div>
            <div class="home-floor-content">
                <div class="home-floor-header clearfix">
                    <h2 class="home-floor-title">数码配件</h2>
                    <div class="home-floor-nav dig_title">
                        <volist name="smpjData" id="smpjD">
                            <if condition="$i==1">
                                <a href="javascript:;" data-id="{$smpjD['bid']}" class="home-floor-nav-link active">{$smpjD['class_name']}</a>
                                <else/>
                                <a href="javascript:;" data-id="{$smpjD['bid']}" class="home-floor-nav-link">{$smpjD['class_name']}</a>
                            </if>
                        </volist>
                     </div>
                    <a class="home-floor-more">更多&gt;</a></div>
                <div class="home-floor-content-list">
                    <!--		 第一个	-->
                    <ul class="home-floor-product clearfix active">
                    <volist name="smpjData" id="smpjD">
                        <if condition="$i==1">
                        <volist name="smpjD.items" id="vo">
                            <if condition="$i==1">
                                <li class="home-product ad">
                                    <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}" >
                                        <img class="home-product-img" src="{$vo['img_url']}">
                                        <switch name="vo.sales">
                                            <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                        </switch>
                                    </a>
                                </li>
                                <else/>
                                <li class="home-product">
                                    <a class="home-product-link" href="{:U('Home/Shop/article',array('id'=>$vo['id']))}" >
                                        <img class="home-product-img" src="{$vo['img_url']}">
                                        <h4 class="home-product-title">{$vo['title']|cutStr=10,0,1}</h4>
                                        <h6 class="home-product-subtitle red">{$vo['content']|cutStr=30,0,1}</h6>
                                        <p class="home-product-bottom"> <span class="home-product-price">{$vo.jiage} </span> </p>
                                        <switch name="vo.sales">
                                            <case value="1"><div class="home-product-sign" style="background-color: #00c3f5;">新品</div></case>
                                        </switch>
                                    </a>
                                </li>
                            </if>
                        </volist>
                    </ul>
                    </if>
                </volist>

                </div>
            </div>
        </li>
    </ul>
</div>
<include file="footer"/>
<script>
    //点击温控器切换数据
    $(".wkq_title a").click(function () {
        getCateDataList(this);
    })
    //点击温控配件切换数据
    $(".wkpj_title a").click(function () {
        getCateDataList(this);
    })
    //点击数码配件切换数据
    $(".dig_title a").click(function () {
        getCateDataList(this);
    })
    function getCateDataList(obj) {
        $(obj).addClass('active').siblings().removeClass('active');
        var proId=$(obj).attr('data-id');
        $.post("{:U('Home/Shop/getCateData')}",{pid:proId},function (response) {

            if(response.status==1){
              // console.log($(obj).closest('.home-floor-header').next().find('.home-floor-product').addClass('proItem'))
               $(obj).closest('.home-floor-header').next().find('.home-floor-product').html('');
               // $("ul.wkq-proData").html('');
                var html='';
                for(var i=0;i<response.data.length;i++){
                    if(i==0){
                        if(response.data[i].sales==1){
                            html+=' <li class="home-product ad">\n' +
                                '\t\t\t\t<a class="home-product-link" href="{:U(\'Index/Shop/article\',array(\'id\'=>$vo[\'id\']))}"> <img class="home-product-img" src="'+response.data[i].img_url+'" > </a>\n' +
                                '              \t\t<div class="home-product-sign" style="background-color: #00c3f5;">新品</div>\n' +
                                '\t\t\t</li>';
                        }else{
                            html+=' <li class="home-product ad">\n' +
                                '\t\t\t\t<a class="home-product-link" href="{:U(\'Index/Shop/article\',array(\'id\'=>$vo[\'id\']))}"> <img class="home-product-img" src="'+response.data[i].img_url+'" > </a>\n' +
                                '\t\t\t</li>';
                        }
                    }else{
                        if(response.data[i].sales==1){
                            html+='   <li class="home-product">\n' +
                                '\t\t\t\t<a class="home-product-link" href="{:U(\'Index/Shop/article\',array(\'id\'=>$vo[\'id\']))}" >\n' +
                                '\t\t\t\t\t<img class="home-product-img" src="'+response.data[i].img_url+'" >\n' +
                                '              \t\t<h4 class="home-product-title">'+response.data[i].title+'</h4>\n' +
                                '              \t\t<h6 class="home-product-subtitle red">'+response.data[i].content+'</h6>\n' +
                                '              \t\t<p class="home-product-bottom"> <span class="home-product-price">'+response.data[i].jiage+' </span> </p>\n' +
                                '              \t\t<div class="home-product-sign" style="background-color: #00c3f5;">新品</div>\n' +
                                '             \t </a>\n' +
                                '\t\t\t </li>';
                        }else{
                            html+='   <li class="home-product">\n' +
                                '\t\t\t\t<a class="home-product-link" href="{:U(\'Index/Shop/article\',array(\'id\'=>$vo[\'id\']))}" >\n' +
                                '\t\t\t\t\t<img class="home-product-img" src="'+response.data[i].img_url+'" >\n' +
                                '              \t\t<h4 class="home-product-title">'+response.data[i].title+'</h4>\n' +
                                '              \t\t<h6 class="home-product-subtitle red">'+response.data[i].content+'</h6>\n' +
                                '              \t\t<p class="home-product-bottom"> <span class="home-product-price">'+response.data[i].jiage+' </span> </p>\n' +
                                '             \t </a>\n' +
                                '\t\t\t </li>';
                        }

                    }
                }
               $(obj).closest('.home-floor-header').next().find('.home-floor-product').append(html);
           }
        },'json')
    }
</script>